<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter='20' style='padding-left: 20px;'>
      <el-col :span='3'>
        <el-input placeholder='请输入名称搜索' v-model='queryForm.query.name'></el-input>
      </el-col>
      <el-col :span='4'>
        <el-button type='hawkSearch' @click='search()'>搜索</el-button>
        <el-button plain @click='clearSearchData()'>重置</el-button>
      </el-col>
      <el-col :span='4' style='float: right;text-align: right;padding-right: 30px'>
        <el-button type='hawkCreate' @click='editRow()'>创建中间件</el-button>
        <el-button plain>导入</el-button>
      </el-col>
    </el-row>
    <hawk-table
      :table-data='tableData'
      @selectionChange="handleSelectionChange"
      :options='[{key:"name",label:"名称"}
      ,{key:"version",label:"版本"}
      ,{key:"handle",label:"操作"}]'>
      <template #handle='{ row }'>
        <span class='hawk-text-btn' @click='editRow(row)'>编辑</span>
        <span class='hawk-text-divider'>|</span>
        <span class='hawk-text-btn' @click='deleteRow(row)'>删除</span>
      </template>
    </hawk-table>
    <div class='bottom-btns'>
      <div class='bottom-btns-left'>
        <div class='bottom-btns-left-num'>{{ multipleSelection.length }} 选择</div>
        <el-button type='hawkDelete' @click="batchDelete()">批量删除</el-button>
        <el-button plain>导出</el-button>
      </div>
      <el-pagination
        background
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page.sync='queryForm.page.current'
        :page-sizes='[10,20,50,100]'
        :page-size='queryForm.page.size'
        layout=' prev, pager, next,sizes'
        :total='total'
        :hide-on-single-page="true">
      </el-pagination>
    </div>
    <el-dialog
      :title='formTitle'
      :visible.sync='addDialogVisible'
      width='50%'
      :close-on-click-modal='false'
      @close='addDialogClosed'
    >
      <!-- 内容主题区 -->
      <el-form
        :model='addForm'
        :rules='addFormRules'
        ref='addFormRef'
        label-width='70px'
      >
        <el-form-item label='名称' prop='name'>
          <el-input v-model='addForm.name'></el-input>
        </el-form-item>
        <el-form-item label='版本' prop='version'>
          <el-input v-model='addForm.version'></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot='footer' class='dialog-footer'>
        <el-button @click='addDialogVisible = false'>取 消</el-button>
        <el-button type='primary' @click='saveData()'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author 罗冲
 * @description 中间件组件视图层
 * @api /cmdb-middleware
 * @since 2021-10-11 09:00
 * @version v1.0.0
 */
import HawkBreadcrumb from '@/components/breadcrumb/Breadcrumb'
import HawkTable from '@/components/table'
import {
  getList,
  doAdd,
  doEdit,
  doDelete,
  batchDelete,
  search
} from '@/api/assets/list/middleware'
export default {
  components: { HawkBreadcrumb,HawkTable },
  data() {
    return {
      // 增加/编辑  表单标题
      formTitle:'',
      addDialogVisible:false,
      // 表单数据
      addForm: {
        name: '',
        version: ''
      },
      // 表单验证
      addFormRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' },
        ]
      },
      tableData: [],
      multipleSelection: [],
      queryForm: {
        query: {
          name:''
          // version: {
          //   filedValue: '',
          //   req: 'like'
          // }
        },
        page: {
          current: 1,
          size: 10
        }
      },
      total:0
    }
  },
  methods: {
    // 获取列表
    async getDataList() {
      const res = await getList(this.queryForm.page.current,this.queryForm.page.size);
      console.log(res)
      this.total = res.count;
      this.tableData = res.list;
    },
    // 编辑
    editRow(row){
      if (!row) {
        this.formTitle = '添加中间件';
      } else {
        this.formTitle = '修改中间件';
        this.addForm = Object.assign({}, row);
      }
      console.log(this.addForm);
      this.addDialogVisible = true;
    },
    // 删除
    deleteRow(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDelete(row.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        if(this.tableData.length == 1){
          this.queryForm.page.current -=1;
          if(this.queryForm.page.current<1){
            this.queryForm.page.current = 1;
          }
        }
        this.getDataList();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 批量删除
    batchDelete(){
      if(this.multipleSelection.length < 1){
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据'
        });
        return;
      }else{
        this.$confirm('此操作将永久删除所选数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let list = [];
          for(let i = 0; i <this.multipleSelection.length; i++){
            list.push(this.multipleSelection[i].id)
          }
          batchDelete(list);
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          if(this.multipleSelection.length == this.tableData.length){
            this.queryForm.page.current -=1;
            if(this.queryForm.page.current<1){
              this.queryForm.page.current = 1;
            }
          }
          this.getDataList();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    // 搜索
    async search(){
      if(this.queryForm.query.name == ''){
        this.$message({
          type: 'warning',
          message: '请输入搜索内容'
        });
        return;
      }
      const res = await search(this.queryForm.query.name);
      console.log(res);
      this.tableData = res;
      this.total = res.length;
      this.queryForm.page.current = 1;
      this.queryForm.page.size = res.length;
    },
    // 清空搜索信息
    clearSearchData(){
      this.queryForm = this.$options.data().queryForm;
      this.getDataList();
    },
    // 多选
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val
    },
    // 每页数量修改
    handleSizeChange(val) {
      console.log(val);
      this.queryForm.page.size = val;
      this.getDataList();
    },
    // 页码跳转
    handleCurrentChange(val) {
      console.log(val);
      this.queryForm.page.current = val;
      this.getDataList();
    },
    // 关闭弹窗
    addDialogClosed() {
      this.addForm = this.$options.data().addForm;
      this.$refs.addFormRef.resetFields();    //重置表单校验方法
      this.addDialogVisible = false;
    },
    // 提交表单
    saveData(){
      this.$refs.addFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
        } else {
          await doAdd(this.addForm)
        }
        this.addDialogVisible = false;
        this.getDataList();
      })
    }
  },
  created() {
    this.getDataList();
  },
}
</script>

<style lang='scss' scoped>

</style>